<template>
  <sp style="font-size: 20px; font-weight: bold ;margin: 350px;line-height: 30px">用户角色页面</sp>
  <div>
  
   <el-button
      type="primary"
      size="small"
      @click="open(null)"
      >新增</el-button
    >
    <br />
    <br />
    <!-- 显示 -->
    <el-table :data="tableData" border>
      <el-table-column prop="" type="index" label="编号" align="center" />
      <el-table-column
        prop="userName"
        label="用户名"
        align="center"
        width="115"
      />
      <el-table-column
        prop="roleName"
        label="角色"
        align="center"
        width="280"
      />
      <el-table-column prop="sex" label="性别" align="center">
        <template v-slot="scoped">
          <span v-if="scoped.row.sex == false">{{ "男" }}</span>
          <span v-else>{{ "女" }}</span>
        </template>
      </el-table-column>
    

 <el-table-column prop="provinceId" label="所在省份" align="center">
    <template #default="{ row }">
      {{ getProvinceLabel(row.provinceId) }}
    </template>  
  </el-table-column>
  <el-table-column prop="cityId" label="所在市" align="center">
    <template #default="{ row }">
      {{ getCityLabel(row.provinceId, row.cityId) }}
    </template>
  </el-table-column>
  <el-table-column prop="countyId" label="所在县" align="center">
    <template #default="{ row }">
      {{ getCountyLabel(row.provinceId, row.cityId, row.countyId) }}          
    </template>
  </el-table-column>

      <el-table-column
        prop="hamletName"
        label="详细地址"
        align="center"
        show-overflow-tooltip
        width="110"
      />
      <el-table-column prop="createName" label="创建人" align="center" />
      <el-table-column
        prop="createTime"
        label="创建日期"
        align="center"
        width="150"
      >
        <template v-slot="scoped">
         {{
          scoped.row.createTime ? scoped.row.createTime.substring(0, 10) : ""
        }}
        </template>
      </el-table-column>
      <el-table-column prop="updateName" label="修改人" align="center" />
      <el-table-column
        prop="updateTime"
        label="修改日期"
        align="center"
        width="150"
      >
        <template v-slot="scoped">
          {{
            scoped.row.updateTime ? scoped.row.updateTime.substring(0, 10) : ""
          }}
        </template>
      </el-table-column>
      <el-table-column prop="date" label="操作" width="140" align="center">
        <template v-slot="scoped">
          <el-button
            type="warning"
            size="small"
            @click="open(scoped.row)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="Del(scoped.row.userId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
   </div>
 <!-- 新增 -->
  <div>
    <el-dialog
      v-model="Eject.dialogFormVisible"
      :title="Eject.title"
      width="800px"
    >
    
   <el-form  :model="ruleForm"  label-width="auto" class="demo-ruleForm">
      <el-form-item label="用户名" prop="userName" style="width: 330px">
        <el-input v-model="ruleForm.userName" />
      </el-form-item>
      <el-form-item label="性别" prop="name">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio :value="false">男</el-radio>
          <el-radio :value="true">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="部门" prop="region" style="width: 330px">
        <el-select v-model="ruleForm.depId" placeholder="请选择部门">
          <el-option label="生产部门" value="1" />
          <el-option label="采购部门" value="2" />
          <el-option label="质量部门" value="3" />
          <el-option label="供应商部门" value="4" />
          <el-option label="销售部门" value="5" />
          <el-option label="审核部门" value="5" />



        </el-select>
      </el-form-item>

      <el-form-item label="昵称" prop="nickName" style="width: 330px">
        <el-input v-model="ruleForm.nickName" />
      </el-form-item>
      <el-form-item label="所在地址" prop="name">
        <el-cascader size="large" :options="options" v-model="provinces" @change="handleChange" placeholder="请选择省市区"
          style="width: 300px;" />
      </el-form-item>

      <el-form-item label="详细地址" prop="hamletName" style="width: 330px">
        <el-input v-model="ruleForm.hamletName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">
          保存
        </el-button>
        <el-button @click="Eject.dialogFormVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
    
    </el-dialog>

  </div>
</template>
<script setup lang="ts">
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { regionData } from "element-china-area-data"; //引入

import { useCounterStore } from "@/stores/counter";
const store = useCounterStore();
console.log(regionData);

//跳转
const router = useRouter();
//添加条转
const Router = () => {
  router.push("/UserCreateView");
};

//显示
const tableData = ref([]);
const show = () => {
  axios.get("https://localhost:7174/api/Message/GetAll",).then((res) => {
    console.log(res.data.data);
    tableData.value = res.data.data;
  });
};



const getProvinceLabel = (value: number) => {
 
  const province = regionData.find((item: any) => item.value == value);
   
  return province? province.label :'--'
};

const getCityLabel = (provinceValue: number, cityValue: number) => {
  console.log(provinceValue, cityValue)
  const province = regionData.find((item: any) => item.value == provinceValue);
  console.log(province?.label);
  if (!province) return '--';
  const city = province.children?.find((item:any) => item.value == cityValue);
  return city?city.label :'--';
};

const getCountyLabel = (provinceValue: number, cityValue: number, countyValue: number) => {
  const province = regionData.find((item:any) => item.value == provinceValue);
  if (!province) return '--';
  const city = province.children?.find((item:any) => item.value == cityValue);
  if (!city) return '--';
  const county = city.children?.find((item:any) => item.value == countyValue);
  return county?.label || '--';
};


//删除
const Del = (ids: any) => {
  ElMessageBox.confirm("你确定删除吗?", "提示", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios
        .post("https://localhost:7272/api/Message/DelUser", {
          userId: ids,
        })
        .then((res) => {
          if (res.data.code == 204) {
            ElMessage.success(res.data.msg);
          }
          show();
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

//修改跳转console
const Updatedata = (ids: any) => {
  // console.log(ids)
  store.ccstore.updateId = ids;
  router.push({
    name: "UpdateUserView",
  });
};

onMounted(() => {
  show();
});

const Eject = reactive({
  dialogFormVisible: false,
  title: "",
  formLabelWidth: "120px",
  Isture: true,
});

const ruleForm = reactive<any>({
  userId: 0,
  userName: "",
  password: "123",
  nickName: "",
  sex: null,
  depId: null,
  provinceId: null,
  cityId: null,
  countyId: null,
  hamletName: "",
  createName: store.ccstore.userName,
  createTime: new Date(),
  // "updateName": "string",
  // "updateTime": "2025-02-21T11:43:14.830Z",
  isDel: false
})
const options = regionData;
const provinces = ref([])

const handleChange = (values: any) => {
  //console.log(values)
  ruleForm.provinceId = values[0]
  ruleForm.cityId = values[1]
  ruleForm.countyId = values[2]
  //console.log(ruleForm.provinceId = values[0])
}
//姓名唯一验证状态
const Status = reactive({
  OneNameStatu: 1, //1通过名不称重复 2不通过名称重复
})
//添加
const submitForm =  () => {
  if (Eject.Isture) {
      axios.post("https://localhost:7272/api/Message/AddUser", ruleForm).then(res => {
        if (res.data.code == 100) {
          console.log(res.data)
          ElMessage.success(res.data.msg);
          Eject.dialogFormVisible = false;
          show();
         router.push("/NewUserList")
      
        } else {
          if (res.data.data == 0) {
            ElMessage.error("用户名称不能重复");
            return
          }
          else {
            ElMessage.error(res.data.msg);
            return
          }

        }
      })
  } else {
      if (Status.OneNameStatu == 2) {
        ElMessage.error("添加失败!!用户名称重复")
        return;
    }
         axios.post("https://localhost:7272/api/Message/UpdateUser", ruleForm).then(res => {
        console.log(res)
        if (res.data.code == 206) {
          ElMessage.success(res.data.msg);
            Eject.dialogFormVisible = false;
          show();
          router.push({
            name: 'UserList'
          })
        }
        else {
          ElMessage.error(res.data.msg);
        }
      })
  }
    
    }

const open = (row:any) => {
  if (row==null) {

    Eject.dialogFormVisible = true;
   Eject.title = "添加用户";
    Eject.Isture = true;
 ruleForm.userId =0,
 ruleForm.userName= "",
 ruleForm.password= "123",
 ruleForm.nickName="",
 ruleForm.sex= null,
 ruleForm.depId= null,
 ruleForm.provinceId= null,
 ruleForm.cityId= null,
 ruleForm.countyId= null,
 ruleForm.hamletName= "",
 ruleForm.createName= store.ccstore.userName,
 ruleForm.createTime= new Date(),
//  ruleForm.// "updateName": "string",
//  ruleForm.// "updateTime": "2025-02-21T11:43:14.830Z",
 ruleForm.isDel=false
  } else {
    Eject.dialogFormVisible = true;
   Eject.title = "修改用户";
    Eject.Isture = false;
 ruleForm.userId =row.userId,
 ruleForm.userName= row.userName,
 ruleForm.password= row.password,
 ruleForm.nickName=row.nickName,
 ruleForm.sex= row.sex,
 ruleForm.depId= row.depId,
 ruleForm.provinceId= row.provinceId,
 ruleForm.cityId= row.cityId,
 ruleForm.countyId= row.countyId,
 ruleForm.hamletName= row.hamletName,
  ruleForm.createName= row.createName,
 ruleForm.createTime= row.createTime,
 ruleForm.updateName= store.ccstore.userName,
 ruleForm.updateTime= new Date(),
 ruleForm.isDel=row.isDel
      getAdder(ruleForm.provinceId, ruleForm.cityId, ruleForm.countyId)
  }
}

//三级联动反填
const getAdder = (id1: string, id2: string, id3: string) => {
  provinces.value = [String(id1), String(id2), String(id3)]
  console.log(provinces)
}
</script>
